<template>
  <div class="monthlyReport">
    <div class="contentTopTitle">
      <div class="fl">
        <div class="title">营销月报</div>
      </div>
    </div>
    <div>
      <el-form :inline="true" :model="form" label-width="70px" class="formList clearfix">
        <span v-if="form.radio1 == 1">
         <el-form-item label="账期:" class="width50">
           <el-date-picker v-model="form.startAcctMonth"  value-format="yyyyMM" type="month"  placeholder="选择月"></el-date-picker>
           <span>~</span>
           <el-date-picker v-model="form.endAcctMonth"  value-format="yyyyMM" type="month" placeholder="选择月"></el-date-picker>
         </el-form-item>
          <el-form-item label="区域:">
            <dx-cascader :area_id.sync="form.areaId" :area_name.sync="form.areaName" :area_lvl.sync="form.areaLvl" ref="cascader" />
          </el-form-item>
        </span>
        <span v-if="form.radio1 == 2">
         <el-form-item label="账期:" >
           <el-date-picker v-model="form.acctMonth"  value-format="yyyyMM" type="month"  placeholder="选择月"></el-date-picker>
         </el-form-item>
          <el-form-item label="区域:">
            <dx-cascader :area_id.sync="form.areaId" :area_name.sync="form.areaName" :area_lvl.sync="form.areaLvl" ref="cascader" />
          </el-form-item>
        </span>
       <el-form-item class="checkType">
          <template>
             <el-radio-group v-model="form.radio1"  @change="handleRadio1Change">
                <el-radio  :label="1">分账期</el-radio>
                <el-radio  :label="2">分区域</el-radio>
             </el-radio-group>
          </template>
        </el-form-item>
        <el-form-item class="width30">
            <el-button size="small" type="primary" @click="search">查询</el-button>
            <el-button size="small" type="orange" @click="exportModal">导出</el-button>
        </el-form-item>

      </el-form>
    </div>
      <div class="content">
        <el-tabs v-model="activeName" @tab-click="handleClick" ref="tabs">
          <el-tab-pane label="移动用户" name="first">
            <tab1 :rowData="tableData" :colDefList="colDefList" ref="tab1"></tab1>
          </el-tab-pane>
          <el-tab-pane label="手机终端" name="second">
            <tab2 :rowData="tableData" :colDefList="colDefList" ref="tab2"></tab2>
          </el-tab-pane>
          <el-tab-pane label="宽带与ITV" name="third">
            <tab3 :rowData="tableData" :colDefList="colDefList" ref="tab3"></tab3>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
</template>

<script>
  import tab1 from "@/views/budget/tracking/monthlyReport/monthlyReport_tab1";
  import tab2 from "@/views/budget/tracking/monthlyReport/monthlyReport_tab2";
  import tab3 from "@/views/budget/tracking/monthlyReport/monthlyReport_tab3";
  import prefixAPI from "@/api/prefixAPI";
  import {
    getCookie
  } from "@/common/js/cookie";
  import {
    getSessionStorage
  } from "@/common/js/storage";
  import {
    $budgetAPI
  } from "@/api";
  export default {
    name: "monthlyReport",
    components: {
      tab1,
      tab2,
      tab3,
    },
    data() {
      return {
        backRecord: false,
        form: {
          areaId: "",
          startAcctMonth:'',
          endAcctMonth:'',
          checked:false,
          acctMonth:'',
          radio1:1,
        },
        activeName: "first",
        tabVal:1,
        flag:false,
        accountInfo: "",
        tableData: [],
        colDefList: [],
        indexValue:'',

      };
    },
    computed: {
      areaSelect() {
        return this.form.areaSelect;
      }
    },
    created() {
      let query = this.$route.query;
      this.backRecord = typeof(query.backRecord) === undefined ? true : false;
      if (this.backRecord) {
        this.form.areaId = query.areaId;
        this.form.acctMonth = query.acctMonth;
        this.form.endAcctMonth = query.endAcctMonth;
        this.form.startAcctMonth = query.startAcctMonth;
      } else {
        this.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
        this.form.areaId = this.accountInfo.areaId;
      };
      this.getMarketMonth();
    },
    methods: {
      handleRadio1Change(val){
        this.form.radio1=val
        this.search()
      },
      //查询
      search() {
        if(this.activeName=='first'){
          let params = {
            accMonth: this.form.acctMonth,
            endAcctMonth : this.form.endAcctMonth,
            startAcctMonth : this.form.startAcctMonth,
            areaId: this.form.areaId ? this.form.areaId : this.accountInfo.areaId,
            tableFlag: 1,
            radio:this.form.radio1,
            isMonthReport: 1,
          };
          this.listResourceData(params);
        }
        if(this.activeName=='second'){
          let params = {
            accMonth: this.form.acctMonth,
            endAcctMonth : this.form.endAcctMonth,
            startAcctMonth : this.form.startAcctMonth,
            areaId: this.form.areaId ? this.form.areaId : this.accountInfo.areaId,
            tableFlag: 2,
            radio:this.form.radio1,
            isMonthReport: 1,
          };
          this.listResourceData(params);
        }
        if(this.activeName=='third'){
          let params = {
            accMonth: this.form.acctMonth,
            endAcctMonth : this.form.endAcctMonth,
            startAcctMonth : this.form.startAcctMonth,
            areaId: this.form.areaId ? this.form.areaId : this.accountInfo.areaId,
            tableFlag: 3,
            radio:this.form.radio1,
             isMonthReport: 1,
          };
          this.listResourceData(params);
        }

      },
      //导出
      exportModal() {
        let areaId = this.form.areaId;
        let accMonth = this.form.acctMonth;
        let startAcctMonth = this.form.startAcctMonth;
        let endAcctMonth = this.form.endAcctMonth;
        let flag=this.flag;
         let isMonthReport=1;
        let token = getCookie('token');
        if(this.form.radio1 == 1){
          // 根据不同模式切换不同的路径
          if (process.env.NODE_ENV == "development") {
            window.location.href =
              prefixAPI.loc +
              `/api/marketingStatistics/exportAccMonthListData?areaId=${areaId}&startAcctMonth=${startAcctMonth}&endAcctMonth=${endAcctMonth}&isMonthReport=${isMonthReport}&token=${token}`;
          } else if (process.env.NODE_ENV == "production") {
            window.location.href =
              prefixAPI.hp +
             `/api/marketingStatistics/exportAccMonthListData?areaId=${areaId}&startAcctMonth=${startAcctMonth}&endAcctMonth=${endAcctMonth}&isMonthReport=${isMonthReport}&token=${token}`;
          }
        }else{
          // 根据不同模式切换不同的路径
          if (process.env.NODE_ENV == "development") {
            window.location.href =
              prefixAPI.loc +
              `/api/marketingStatistics/exportAreaListData?areaId=${areaId}&accMonth=${accMonth}&isMonthReport=${isMonthReport}&token=${token}`;
          } else if (process.env.NODE_ENV == "production") {
            window.location.href =
              prefixAPI.hp +
             `/api/marketingStatistics/exportAreaListData?areaId=${areaId}&accMonth=${accMonth}&isMonthReport=${isMonthReport}&token=${token}`;
          }
        }
      },
      listResourceData(params) {
            switch (params.tableFlag) {
              case 1:
                this.$refs.tab1.tableLoading = true;
                break;
              case 2:
                this.$refs.tab2.tableLoading = true;
                break;
                case 3:
                  this.$refs.tab3.tableLoading = true;
                  break;
          }
          if(this.form.radio1 ==1){
            if(this.activeName=="first"){
              $budgetAPI.getAccMonthListData(
              params,
              res => {
                   if (res.code == 0) {
                     this.tableLoading = false;
                     this.tableData = res.content.data[0]
                     this.colDefList = res.content.colDefList
                      setTimeout(() => {
                           this.$refs.tab1.init();
                           this.$refs.tab1.tableLoading = false;
                     }, 500);
                } else {
                  // this.alertError(res);
                  console.log(res)
                }
              }, err => {}
              )
            }else if(this.activeName=="second"){
              $budgetAPI.getAccMonthListData(
              params,
              res => {
                   if (res.code == 0) {
                     this.tableLoading = false;
                     this.tableData = res.content.data[0]
                     this.colDefList = res.content.colDefList
                      setTimeout(() => {
                           this.$refs.tab2.init();
                           this.$refs.tab2.tableLoading = false;
                     }, 500);
                } else {
                  // this.alertError(res);
                  console.log(res)
                }
              }, err => {}
              )
            }else if(this.activeName=="third"){
              $budgetAPI.getAccMonthListData(
              params,
              res => {
                   if (res.code == 0) {
                     this.tableLoading = false;
                     this.tableData = res.content.data[0]
                     this.colDefList = res.content.colDefList
                      setTimeout(() => {
                           this.$refs.tab3.init();
                           this.$refs.tab3.tableLoading = false;
                     }, 500);
                } else {
                  // this.alertError(res);
                     console.log(res)
                }
              }, err => {}
              )
            }

          }
          else{
            if(this.activeName=="first"){
              $budgetAPI.getAreaListData(
              params,
              res => {
                   if (res.code == 0) {
                     this.tableLoading = false;
                     this.tableData = res.content.data[0]
                     this.colDefList = res.content.colDefList
                     setTimeout(() => {
                         this.$refs.tab1.init();
                         this.$refs.tab1.tableLoading = false;
                   }, 500);
                } else {
                  // this.alertError(res);
                   console.log(res)

                }
              }, err => {}
              )
            }if(this.activeName=="first"){
              $budgetAPI.getAreaListData(
              params,
              res => {
                   if (res.code == 0) {
                     this.tableLoading = false;
                     this.tableData = res.content.data[0]
                     this.colDefList = res.content.colDefList
                     setTimeout(() => {
                         this.$refs.tab1.init();
                         this.$refs.tab1.tableLoading = false;
                   }, 500);
                } else {
                  // this.alertError(res);
                     console.log(res)
                }
              }, err => {}
              )
            }if(this.activeName=="second"){
              $budgetAPI.getAreaListData(
              params,
              res => {
                   if (res.code == 0) {
                     this.tableLoading = false;
                     this.tableData = res.content.data[0]
                     this.colDefList = res.content.colDefList
                     setTimeout(() => {
                         this.$refs.tab2.init();
                         this.$refs.tab2.tableLoading = false;
                   }, 500);
                } else {
                  // this.alertError(res);
                     console.log(res)
                }
              }, err => {}
              )
            }if(this.activeName=="third"){
              $budgetAPI.getAreaListData(
              params,
              res => {
                   if (res.code == 0) {
                     this.tableLoading = false;
                     this.tableData = res.content.data[0]
                     this.colDefList = res.content.colDefList
                     setTimeout(() => {
                         this.$refs.tab3.init();
                         this.$refs.tab3.tableLoading = false;
                   }, 500);
                } else {
                  // this.alertError(res);
                     console.log(res)
                }
              }, err => {}
              )
            }

          }

      },
      init() {
        if (this.$route.query.backRecord) {
          let query = this.$route.query;
          let params = {
            accMonth: query.acctMonth,
            areaId: query.areaId,
            endAcctMonth : query.endAcctMonth,
            startAcctMonth : query.startAcctMonth,
            tableFlag: 1,
            flag: query.flag,
            tabFlag:1,
          };
          this.listResourceData(params);

        } else {
               let params = {
               accMonth: this.form.acctMonth,
               endAcctMonth : this.form.endAcctMonth,
               startAcctMonth : this.form.startAcctMonth,
               areaId: this.form.areaId ? this.form.areaId : this.accountInfo.areaId,
               tableFlag: 1,
               isMonthReport: 1,
               tabFlag:1,
             }
               this.listResourceData(params);

           // else{
           //   let params = {
           //     accMonth: this.form.acctMonth,
           //     endAcctMonth : this.form.endAcctMonth,
           //     startAcctMonth : this.form.startAcctMonth,
           //     areaId: this.form.areaId ? this.form.areaId : this.accountInfo.areaId,
           //     tableFlag: 1,
           //     isMonthReport: 1,
           //     tabFlag:2,
           //   }
           //     this.listResourceData(params);
           // }
          //else if(this.activeName == 'second'|| this.activeName == 'fouth'){
          //     this.activeName = 'second';
          //      let params = {
          //      acctMonth: this.form.acctMonth,
          //      endAcctMonth : this.form.endAcctMonth,
          //      startAcctMonth : this.form.startAcctMonth,
          //      areaId: this.form.areaId ? this.form.areaId : this.accountInfo.areaId,
          //      tabVal:2,
          //      flag: false,
          //      }
          //       this.listResourceData(params);
          //   }
          // }

           //  if(this.activeName == 'first'){

           //    let params = {
           //    acctMonth: this.form.acctMonth,
           //    endAcctMonth : this.form.endAcctMonth,
           //    startAcctMonth : this.form.startAcctMonth,
           //    areaId: this.form.areaId ? this.form.areaId : this.accountInfo.areaId,
           //    tabVal: 2,
           //    flag: true,
           //  };
           //  this.listResourceData(params);
           // }else if(this.activeName == 'second'){
           //    let params = {
           //      acctMonth: this.form.acctMonth,
           //      endAcctMonth : this.form.endAcctMonth,
           //      startAcctMonth : this.form.startAcctMonth,
           //      areaId: this.form.areaId ? this.form.areaId : this.accountInfo.areaId,
           //      tabVal: 2,
           //      flag: true,
           //  }

           //   this.listResourceData(params);
           // }
        }
      },
      //数据点击切换页请求不同的数据
      handleClick(tab, event) {
        let params = {
         areaId: this.form.areaId ? this.form.areaId : this.accountInfo.areaId,
         tableFlag: null,
        };
        if (tab.name == "first") {
          params.endAcctMonth = this.form.endAcctMonth,
          params.startAcctMonth = this.form.startAcctMonth,
          params.accMonth= this.form.acctMonth,
          params.tableFlag = 1;
          params.isMonthReport=1;
          params.tabFlag=1,
          this.listResourceData(params);
        }
        if (tab.name == "second") {
          params.endAcctMonth = this.form.endAcctMonth,
          params.startAcctMonth = this.form.startAcctMonth,
           params.accMonth= this.form.acctMonth,
           params.tableFlag = 2;
           params.isMonthReport=1;
            params.tabFlag=2,
           this.listResourceData(params);
        }
        if (tab.name == "third") {
        params.endAcctMonth = this.form.endAcctMonth,
        params.startAcctMonth = this.form.startAcctMonth,
        params.accMonth= this.form.acctMonth,
          params.tableFlag = 3;
          params.isMonthReport=1;
          params.tabFlag=1,
          this.listResourceData(params);
        }
      },
      //获取账期
     getMarketMonth(){
       let areaId = this.form.areaId;
       let isMonthReport=1;
        let that = this;
       $budgetAPI.getMarketMonth(
       {areaId:areaId,
        isMonthReport:isMonthReport
       },
       res=>{
           if (res||res.code == 0) {
             that.form.endAcctMonth = res.content.maxAcctMonth;
             that.form.startAcctMonth = res.content.preSixMonth;
             that.form.acctMonth = res.content.maxAcctMonth;
              this.init();
           }
       }, err => {}
       )
    }
    }
  };
</script>

<style lang="scss" scoped>
  .monthlyReport{
    .table-content {
      .table-header {
        display: flex;
        justify-content: space-between;
        .btn-right {
          display: flex;
        }

        .table-title {
          font-size: 14px;
          font-weight: bold;
          height: 30px;
          line-height: 30px;

          span {
            display: inline-block;
            width: 5px;
            height: 5px;
            background-color: #418ee9;
            border-radius: 1000%;
            overflow: hidden;
            margin-right: 10px;
            margin-bottom: 3px;
          }
        }
      }

    }
  }
</style>
<style lang="scss">
  .monthlyReport {
    .formList {
       &.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
              content: "";
              display: block;
              height: 0;
              clear:both;
              visibility: hidden;
          }
          .clearfix{
              *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
          }
      .el-form-item {
        width: 22%;
        .el-form-item__content{
           width: calc(100% - 70px);
        }
        &.checkType{
          width: 20%;
          .el-form-item__content{
             width: 100%;
          }
        }
      }
      .el-form-item.width50 {
        width: 40%;
        .el-form-item__content .el-input{
           width: 45%;
        }

      }
      .el-form-item.width30{
        width:30%;
        margin-left: 20px;
        width: 21%;
        float:right;
        .el-form-item__content{
           width: 100% ;
           text-align:center;
        }
      }
       .el-form-item.checkedBox {
        margin-left: 20px;
        width: 10%;
        .el-checkbox__inner{
          border-radius: 100%;
        }
      }
      .el-form-item.btnBox {
        margin-bottom: 0px;
        width: 18%;
        margin-right: 0;

        .el-form-item__content {
          display: flex;
        }
      }
    }
  }
</style>
